<template>
	<el-drawer
		title="广告位详情"
		:visible.sync="dialogVisible"
		direction="rtl"
		size="500px"
		append-to-body
		:show-close="false"
		:wrapper-closable="false"
		@mousedown.native="$drawer.getMousedown($event)"
		@mouseup.native="dialogVisible = $drawer.getMouseup($event)"
	>
		<el-popover
			placement="left-start"
			trigger="hover"
			width="200"
			content="按ESC键快捷关闭弹窗"
			class="drawer-close"
		>
			<span slot="reference" @click="dialogVisible = false">
				<i class="el-icon-close icon-common-close"></i>
			</span>
		</el-popover>
		<div class="drawerBody acconutDetails">
			<div v-if="info" class="acconutDetails-content">
				<div class="li">
					<h2 class="li-name">广告标题：{{ info.focus_title }}</h2>
					<div class="li-name">广告位ID：{{ info.focus_id }}</div>
					<div class="li-name">发布时间：{{ info.add_time }}</div>
					<div class="li-name">
						展示时间：{{
							info.finish_time == 0 ? '不限制时间' : `${info.begin_time}~${info.finish_time}`
						}}
					</div>

					<div class="li-name">
						类型：{{ info.is_ad == 1 ? '首页弹窗' : info.is_ad == 0 ? '首页轮播' : '--' }}
					</div>
					<div class="li-name">
						跳转方式：{{
							info.focus_type == 1
								? '自定图文'
								: info.focus_type == 2
								? '公众号链接'
								: info.focus_type == 3
								? '赛事详情'
								: '--'
						}}
					</div>
					<div class="li-name" v-if="info.focus_type === 1">
						图文详情：
						<div class="li-name li-html" v-html="info.focus_content"></div>
					</div>
					<div class="li-name" v-else-if="info.focus_type === 2">
						公众号链接：
						<el-link :href="info.focus_link" type="primary" target="_blank">
							{{ info.focus_link }}
						</el-link>
					</div>
					<div class="li-name" v-else-if="info.focus_type === 3">赛事ID：{{ info.focus_link }}</div>
					<div class="li-name">
						<p style="margin-bottom: 10px">广告图片：</p>
						<el-image
							style="width: 100%; max-width: 420px; height: auto; margin: 0 auto 6px"
							:src="item"
							:preview-src-list="info.focus_img"
							v-for="(item, index) in info.focus_img"
							:key="item + index"
						></el-image>
					</div>
				</div>
			</div>
			<el-empty v-else :image-size="160" style="margin-top: 100px"></el-empty>
		</div>
	</el-drawer>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { focusDetail } from '@/api/article.js'
	export default {
		data() {
			return {
				dialogVisible: false,
				info: null
			}
		},
		computed: { ...mapGetters(['userInfo', 'token']) },
		methods: {
			async init(info) {
				console.log(info)
				await this.getDetailInfo(info.focus_id)
				this.dialogVisible = true
			},
			async getDetailInfo(focus_id) {
				const loading = this.$setLoading()
				try {
					const res = await focusDetail({ focus_id })
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.acconutDetails {
		&-content {
			.li {
				font-size: 14px;
				padding: 16px;
				background: #f4f4f4;
				border-radius: 4px;
				margin: 0 0 24px 0;
				&-name {
					margin-bottom: 15px;
				}
				&-html {
					width: 100%;
					word-break: break-all;
					white-space: pre-wrap;
					overflow-wrap: break-word;
					word-wrap: break-word;
				}

				&-user {
					display: flex;
					align-items: center;
					color: #4e5969;
				}

				&-content {
					color: #1d2129;
					margin-top: 20px;
					display: flex;
				}
			}
		}
	}
	::v-deep {
		.el-drawer .el-drawer__header {
			margin-bottom: 0;
		}
	}
</style>
